<template>
  <div class="app-container">
    <el-form ref="form" :model="form">
<!--      <el-divider content-position="left"><h3>站点配置</h3></el-divider>-->
<!--      <el-form-item label="站点名称" :label-width="width" style="width: 600px" prop="site.name">-->
<!--        <el-input v-model="site.name" placeholder="请输入站点名称" autocomplete="off" clearable />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="站点链接" :label-width="width">-->
<!--        <el-input v-model="site.url" placeholder="请输入站点链接" autocomplete="off" clearable />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="站点关键字" :label-width="width">-->
<!--        <el-input v-model="site.keywords" placeholder="请输入站点关键字" autocomplete="off" clearable />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="站点描述" :label-width="width">-->
<!--        <el-input v-model="site.description" type="textarea" placeholder="请输入站点描述" autocomplete="off" clearable />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="上传设置" :label-width="width">-->
<!--        <el-select v-model="site.upload" placeholder="请选择上传方式">-->
<!--          <el-option-->
<!--            v-for="(item, key) in upload"-->
<!--            :key="item"-->
<!--            :label="item"-->
<!--            :value="key"-->
<!--          />-->
<!--        </el-select>-->
<!--      </el-form-item>-->

<!--      <el-divider content-position="left"><h3>底部信息</h3></el-divider>-->
<!--      <el-form-item label="备案号" :label-width="width">-->
<!--        <el-input v-model="footer.record_number" placeholder="请输入备案号" autocomplete="off" clearable />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="版权信息" :label-width="width">-->
<!--        <el-input v-model="footer.copyright" placeholder="请输入版权信息" autocomplete="off" clearable />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="联系方式" :label-width="width">-->
<!--        <el-input v-model="footer.contact" placeholder="请输入联系方式" autocomplete="off" clearable />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="备案链接地址" :label-width="width">-->
<!--        <el-input v-model="footer.record_url" placeholder="请输入备案链接地址" autocomplete="off" clearable />-->
<!--      </el-form-item>-->
      <el-divider content-position="left"><h3>其他配置</h3></el-divider>
<!--      <el-form-item label="黑名单IP" :label-width="width">-->
<!--        <el-input v-model="other.blacklist" type="textarea" placeholder="黑名单IP，IP 逗号隔开" autocomplete="off" clearable />-->
<!--      </el-form-item>-->
      <el-form-item label="小程序过审是否开启" :label-width="width">
        <el-radio-group v-model="other.mini_program">
          <el-radio :value="mini_program_close_status">关闭</el-radio>
          <el-radio :value="mini_program_open_status">开启</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item style="margin: auto">
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang='ts' setup>

import { onMounted, reactive, ref } from 'vue'
import http from '@/support/http'
import Message from '@/support/message'

const width = ref('180px')
const site = ref<object>({})
site.value = Object.assign({
  name: '',
  url: '',
  keywords: '',
  description: '',
  upload: ''
})
const footer = ref<object>({})
footer.value= Object.assign({
  record_number: '',
  copyright: '',
  contact: '',
  record_url: ''
})
const other = ref<object>({})
other.value = Object.assign({
  blacklist: '',
  mini_program: 0,
})
const parent = ref('basic')
const upload = {
  local: '本地上传',
    oss: '阿里OSS',
    qcloud: '腾讯云上传',
    qiniu: '七牛云上传'
}
const mini_program_close_status = '0'
const mini_program_open_status = '1'
const form = {
  site: site.value,
  footer: footer.value,
  other: other.value,
  parent: parent.value
}

const basic = ref([])

const submit = () => {
  http.post('config', form).then(response => {
    Message.success(response.data.message)
  })
}

onMounted(() => {
  http.get('/config/basic').then(response => {
    basic.value = response.data.data
    Object.keys(basic.value).forEach(k => {
      Object.keys(basic.value[k]).forEach(key => {
        form[k][key] = basic.value[k][key]
      })
    })
  })
})
</script>

<style scoped>
 .el-form .el-form-item {
   width: 600px;
 }
</style>
